<template>
    <div class="container">
        <el-form ref="form" :model="form" label-width="120px" size="mini" v-loading="saveLoding">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="发布日期">
                        <el-date-picker v-model="form.releaseDate"  format="yyyy-MM-dd" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="截止日期">
                        <el-date-picker v-model="form.deadline" format="yyyy-MM-dd" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="发布对象">
                        <el-input v-model="form.sjnd"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="说明">
                        <el-input type="textarea" v-model="form.bz" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="填报表格内容">
                        <div >
                            <div class="head_tb">

                                <div>
                                    <el-button type="primary" size="mini" @click="add()" v-show="!previewFlag">新增</el-button>
                                    <el-button type="primary" size="mini" @click="del()" v-show="!previewFlag">删除</el-button>
                                    <el-button type="primary" size="mini" @click="previewHandle()" v-show="!previewFlag">预览</el-button>
                                    <el-button type="primary" size="mini" @click="previewFlag = !previewFlag" v-show="previewFlag">返回</el-button>
                                </div>
                            </div>
                            <el-table v-show="!previewFlag" v-loading="loading" ref="bqEltable" :data="tableDatas" style="width: 100%" fit border @selection-change="dochandleSelectionChange">
                                <el-table-column type="selection" width="63" align="center"> </el-table-column>
                                <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex"> </el-table-column>
                                <el-table-column label="列名称" prop="lmc" align="center">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.lmc"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="输入类型" prop="srlx" align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.srlx">
                                            <el-option v-for="item in srlxOption" :key="item.label" :label="item.label" :value="item.value"> </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div v-show="previewFlag">
                            <el-table  :data="previewtableDatas" style="width: 100%" fit border >
                                <el-table-column v-for="item in tableDatas" :key="item.lmc" :label="item.lmc" :prop="item.lmc" align="center">
                                   
                                </el-table-column>
                               
                            </el-table>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
       
    </div>
</template>

<script>
import { add } from '@/api/zcgj/yzgj'
export default {

    data() {
        return {
            saveLoding: false,
            form: {
                name: '',
                status: '1',
                releaseDate: '',
                deadline: '',
                bz: '',


                sjnd: '',
                scsj: '',
                scry: '',
            },
            previewFlag: false,
            srlxOption: [
                {
                    value: 'number',
                    label: '数字'
                },
                {
                    value: 'date',
                    label: '日期'
                },
                {
                    value: 'decimal',
                    label: '金额'
                },
                {
                    value: 'varchar',
                    label: '文本'
                },
            ],

            files: [],
            statusOptions: [
                {
                    value: '1',
                    label: '起草中'
                },
                {
                    value: '2',
                    label: '发布中'
                },
                {
                    value: '3',
                    label: '已完成'
                },
            ],
            rwform: [],
            loading: false,
            tableDatas: [
                {
                    lmc: '序号',
                    srlx: 'number'
                }
            ],
            previewtableDatas:[{}],
            docSelect: []

        }
    },
    mounted() {
        var currentDate = new Date();
        var year = currentDate.getFullYear(); // 获取当前年份
        var month = (currentDate.getMonth() + 1) > 9 ? currentDate.getMonth() + 1 : '0' + (currentDate.getMonth() + 1); // 获取当前月份（注意月份是从0开始，所以要加1）
        var day = currentDate.getDate();
        this.form.releaseDate =year+'-'+month+'-'+day 
    },
    methods: {
        onSubmit() {
            const reg = /^[0-9]+$/;

            if (this.form.qymc == '') {
                this.$message.error('请输入企业名称')
                return false
            }
            if (this.form.tyshxydm == '') {
                this.$message.error('请输入社会信用代码')
                return false
            }
            if (this.form.sjnd == '') {
                this.$message.error('请输入所属年度')
                return false
            } else if (!reg.test(this.form.sjnd)) {
                this.$message.error('数据年度请输入0-9之间的数字')
                return false
            }

            if (this.files.length <= 0) {
                this.$message.error('请上传文件')
                return false
            }

            let fd = new FormData();
            fd.append("sjnd", this.form.sjnd);
            fd.append("tyshxydm", this.form.tyshxydm);
            fd.append("qymc", this.form.qymc);
            fd.append("illustrate", this.form.illustrate);
            for (let i = 0; i < this.files.length; i++) {

                fd.append("files", this.files[i].file, this.files[i].file.name);


            }
            this.save(fd)

        },

        save(data) {
            this.saveLoding = true
            add(data).then((res) => {
                this.saveLoding = false
                if (res.code == 200) {

                    this.$message({
                        type: "success",
                        message: '保存成功',
                    });
                    // this.getTableData()
                    this.go('list')
                }
            });

        },
        add() {
            this.tableDatas.push({
                lmc: '',
                srlx: ''
            })
        },
        del() {
            if (this.docSelect.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    for (let i = 0; i < this.docSelect.length; i++) {
                        for (let j = 0; j < this.tableDatas.length; j++) {
                            if (this.docSelect[i].lmc == this.tableDatas[j].lmc) {
                                this.tableDatas.splice(j, 1)
                                this.files.splice(j, 1)
                            }
                        }
                    }

                    this.loading = false

                }).catch(error => {
                    this.loading = false;
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
        },
        previewHandle(){
           this.previewFlag = !this.previewFlag

        },
       
        currIndex(index) {
            return index + 1;
        },
        rwHandle() {
            this.dialogVisible = true
        },
        dochandleSelectionChange(selectedRows) {
            this.docSelect = selectedRows;
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .timeSelct {
        .el-input {
            display: inline;
        }
    }

    .el-dialog .el-dialog__body .el-form .el-select {
        display: inline !important;
    }

    ::v-deep .el-dialog .el-dialog__body .el-form .el-form-item__content {
        width: calc(100% - 100px);
    }
    .mybtn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        padding: 0;
    }

    .head_tb {
        display: flex;
        justify-content: right;
        margin-bottom: 10px;

        .title_tb {
            // border-left:4px solid #ccc;
        }
    }
}
</style>